{% extends "base_generic.html" %}
{% load i18n %}
{% load widget_tweaks %}
{% block content %}
<div class="d-flex justify-content-center align-items-center" style="min-height: 80vh;">
  <div class="card shadow p-4" style="min-width:350px; max-width:400px; width:100%;">
    {% if validlink %}
      <h2 class="mb-4 text-center"><i class="bi bi-shield-lock me-2"></i>{% trans 'Change my password' %}</h2>
      <p class="mb-3">{% trans "Please enter (and confirm) your new password." %}</p>
      <form action="" method="post">
        {% csrf_token %}
        <div class="form-group mb-3">
          {{ form.new_password1.label_tag }}
          {{ form.new_password1|add_class:'form-control' }}
          {% if form.new_password1.errors %}
            <div class="invalid-feedback d-block">{{ form.new_password1.errors }}</div>
          {% endif %}
        </div>
        <div class="form-group mb-3">
          {{ form.new_password2.label_tag }}
          {{ form.new_password2|add_class:'form-control' }}
          {% if form.new_password2.errors %}
            <div class="invalid-feedback d-block">{{ form.new_password2.errors }}</div>
          {% endif %}
        </div>
        <button type="submit" class="btn btn-primary w-100">{% trans 'Change my password' %}</button>
      </form>
    {% else %}
      <h2 class="mb-4 text-danger"><i class="bi bi-x-circle me-2"></i>{% trans "Password reset failed" %}</h2>
      <div class="alert alert-danger">{% trans "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}</div>
    {% endif %}
  </div>
</div>
{% endblock %}
